<template>
  <view class="share_modal">
    <view class="cu-modal bottom-modal show">
      <view class="cu-dialog" @click.prevent="">
        <view class="padding-xl">
          <h1 class="title">历史价格走势</h1>
          <!-- 历史价格折线表 -->
          <view class="history_ucharts">
            <view class="switch_day">
              <text class="item" :class="{active : historyDay === 0}" @click="switchDay(0)">全部</text>
              <text class="item" :class="{active : historyDay === 180}" @click="switchDay(180)">180天</text>
              <text class="item" :class="{active : historyDay === 60}" @click="switchDay(60)">60天</text>
              <text class="item" :class="{active : historyDay === 30}" @click="switchDay(30)">30天</text>
              <text class="max_price">最高:{{uchartsOpts.max || 0}}元</text>
              <text class="min_price">最低:{{uchartsOpts.min || 0}}元</text>
            </view>
            <Ucharts v-if="uchartsOpts" :opts="uchartsOpts" chartType="line" ref="ucharts"/>
          </view>
          <button class="cancel" @click="close">取消</button>
        </view>
      </view>
    </view>
    <!-- 消息弹框 -->
    <message ref="message"/>
  </view>
</template>

<script>
  import Ucharts from './ucharts'
  export default {
    components: {
      Ucharts,
    },
    props: {
      itemDetail: {
        type: Object,
      },
    },
    data() {
      return {
        uchartsOpts: null, // ucharts基础配置
        historyDay: 30, // ucharts时间跨度，默认30天
      }
    },
    computed: {
      userInfo(){
        return this.$store.state.userInfo
      },
    },
    mounted(){
      this.getItemHistory()
    },
    methods: {
      getItemHistory(type){
        this.$refs['message'].showLoading() // 提示加载中弹框
        this.$api.user.getItemHistory({
          ...this.itemDetail,
          day: this.historyDay,
        }).then(res => {
          // #ifndef H5 || APP-PLUS
          getApp().mtj.trackEvent('itemhistory', { // 埋点统计
            user_id: this.userInfo.id || 0,
            item_name: this.itemDetail.dtitle || this.itemDetail.title || '无优惠信息商品',
          });
          // #endif
          this.$refs['message'].hideLoading() // 隐藏加载中弹框
          this.uchartsOpts = res
          if(type === 'refresh'){
            this.$refs.ucharts.changeData(res)
          }
        })
      },
      switchDay(day){ // 切换图表天数
        this.historyDay = day
        this.getItemHistory('refresh')
      },
      close() {
        this.$emit('close')
      }
    }
  }
</script>

<style scoped lang="scss">
  .share_modal {
    .cu-modal {
      z-index: 3000;
      .cu-dialog {
        border-radius: 30upx 30upx 0 0;
        .padding-xl {
          padding: 20upx 0 50upx;
          .title{
            font-size: 35upx;
          }
          .history_ucharts{
            margin-top: 40upx;
            height: 280px;
            .switch_day{
              margin: 20upx 0;
              .item{
                display: inline-block;
                padding: 5upx 10upx;
                margin-left: 20upx;
                font-size: 25upx;
                border:1px dashed #CCCCCC;
              }
              .active{
                border: none;
                color: #FFFFFF;
                background-color: #294d7d;
              }
              .max_price, .min_price{
                font-size: 25upx;
                margin-left: 15upx;
              }
            }
          }
          .cancel {
            margin: 0 50upx 0;
            font-size: 30upx;
            color: #FFFFFF;
            background-color: #294d7d;
          }
        }
      }
    }
  }
</style>